<template>
  <view class="lt-container">
    <!-- 1. 背景层 -->
    <view class="bg-layer">
      <text class="bg-text">EDIT_MODE</text>
      <view class="bg-grid"></view>
    </view>

    <!-- 2. 顶部导航栏 -->
    <view class="header-section">
      <view class="header-left">
        <text class="code">RESUME_ID: 2022442606</text>
        <text class="title">PROFILE EDITOR // 简历编辑</text>
      </view>
      <view class="header-right">
        <view class="status-badge">EDITING</view>
      </view>
    </view>

    <scroll-view scroll-y class="form-viewport">
      
      <!-- SECTION 1: 基础信息 -->
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">01. BASIC INFO // 基本信息</text>
          <view class="deco-line"></view>
        </view>
        
        <view class="form-grid">
          <view class="input-group">
            <text class="label">NAME 姓名</text>
            <input class="lt-input" v-model="resumeData.name" placeholder="请输入姓名" />
          </view>
          <view class="input-group">
            <text class="label">GENDER 性别</text>
            <input class="lt-input" v-model="resumeData.gender" placeholder="请输入性别" />
          </view>
          <view class="input-group">
            <text class="label">AGE 年龄</text>
            <input class="lt-input" type="number" v-model="resumeData.age" placeholder="请输入年龄" />
          </view>
          <view class="input-group">
            <text class="label">DEGREE 学历</text>
            <input class="lt-input" v-model="resumeData.education" placeholder="最高学历" />
          </view>
          <view class="input-group full-width">
            <text class="label">PHONE 电话</text>
            <input class="lt-input" type="number" v-model="resumeData.phone" placeholder="请输入手机号" />
          </view>
          <view class="input-group full-width">
            <text class="label">EMAIL 邮箱</text>
            <input class="lt-input" v-model="resumeData.email" placeholder="请输入邮箱" />
          </view>
          <view class="input-group full-width">
            <text class="label">JOB INTENTION 求职意向</text>
            <input class="lt-input" v-model="resumeData.jobIntention" placeholder="期望岗位" />
          </view>
        </view>
      </view>

      <!-- SECTION 2: 教育经历 (动态列表) -->
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">02. EDUCATION // 教育经历</text>
          <view class="add-btn" @click="addEducation">
            <text>+</text> ADD
          </view>
        </view>

        <view class="list-container">
          <view class="list-item" v-for="(edu, index) in resumeData.educationList" :key="index">
            <view class="item-header">
              <text class="item-index">#{{index + 1}}</text>
              <text class="delete-btn" @click="removeEducation(index)">DELETE</text>
            </view>
            
            <view class="form-grid">
              <view class="input-group full-width">
                <text class="label">SCHOOL 学校</text>
                <input class="lt-input" v-model="edu.schoolName" placeholder="学校名称" />
              </view>
              <view class="input-group">
                <text class="label">MAJOR 专业</text>
                <input class="lt-input" v-model="edu.major" placeholder="专业名称" />
              </view>
              <view class="input-group">
                <text class="label">DEGREE 学历</text>
                <input class="lt-input" v-model="edu.degree" placeholder="本科/硕士..." />
              </view>
              <view class="input-group">
                <text class="label">START 开始时间</text>
                <input class="lt-input" v-model="edu.startDate" placeholder="YYYY.MM" />
              </view>
              <view class="input-group">
                <text class="label">END 结束时间</text>
                <input class="lt-input" v-model="edu.endDate" placeholder="YYYY.MM / 至今" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- SECTION 3: 项目经历 (动态列表) -->
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">03. PROJECTS // 项目经历</text>
          <view class="add-btn" @click="addProject">
            <text>+</text> ADD
          </view>
        </view>

        <view class="list-container">
          <view class="list-item" v-for="(proj, index) in resumeData.projectList" :key="index">
            <view class="item-header">
              <text class="item-index">PROJECT_0{{index + 1}}</text>
              <text class="delete-btn" @click="removeProject(index)">DELETE</text>
            </view>
            
            <view class="form-grid">
              <view class="input-group full-width">
                <text class="label">PROJECT NAME 项目名称</text>
                <input class="lt-input" v-model="proj.projectName" placeholder="项目名称" />
              </view>
              <view class="input-group full-width">
                <text class="label">ROLE 担任角色</text>
                <input class="lt-input" v-model="proj.role" placeholder="例如：后端负责人" />
              </view>
              <view class="input-group">
                <text class="label">START 开始时间</text>
                <input class="lt-input" v-model="proj.startDate" placeholder="YYYY.MM" />
              </view>
              <view class="input-group">
                <text class="label">END 结束时间</text>
                <input class="lt-input" v-model="proj.endDate" placeholder="YYYY.MM" />
              </view>
              <view class="input-group full-width">
                <text class="label">DESCRIPTION 项目描述</text>
                <textarea 
                  class="lt-textarea" 
                  v-model="proj.description" 
                  maxlength="-1" 
                  
                  placeholder="请输入项目描述、核心技术、职责等..."
                ></textarea>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- SECTION 4: 自我评价 -->
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">04. SUMMARY // 个人总结</text>
        </view>
        <view class="input-group full-width">
          <textarea 
            class="lt-textarea" 
            v-model="resumeData.summary" 
            maxlength="-1" 
            auto-height 
            placeholder="请输入自我评价..."
            style="min-height: 200rpx;"
          ></textarea>
        </view>
      </view>

      <view style="height: 180rpx;"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <button class="lt-btn cancel" @click="goBack">CANCEL</button>
      <button class="lt-btn save" @click="handleSave">
        <text class="btn-icon">💾</text> SAVE CHANGES
      </button>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始数据（根据你的要求填入）
	  rawItemCopy: {},
	  resumeId:'',
      resumeData: {}
    }
  },
  methods: {
    // 添加教育经历
    addEducation() {
      this.resumeData.educationList.push({
        schoolName: '', major: '', degree: '', startDate: '', endDate: ''
      });
    },
    // 删除教育经历
    removeEducation(index) {
      uni.showModal({
        title: 'WARNING',
        content: '确认删除此条教育经历吗？',
        success: (res) => {
          if (res.confirm) {
            this.resumeData.educationList.splice(index, 1);
          }
        }
      });
    },
    // 添加项目
    addProject() {
      this.resumeData.projectList.push({
        projectName: '', role: '', startDate: '', endDate: '', description: ''
      });
    },
    // 删除项目
    removeProject(index) {
      uni.showModal({
        title: 'WARNING',
        content: '确认删除此条项目经历吗？',
        success: (res) => {
          if (res.confirm) {
            this.resumeData.projectList.splice(index, 1);
          }
        }
      });
    },
    // 返回
    goBack() {
      uni.navigateBack();
    },
    // 保存数据
    handleSave() {
      uni.showLoading({ title: 'UPLOADING...', mask: true });
      
      // 打印修改后的数据，方便调试
      console.log('提交的JSON数据sssssssssssss:', this.rawItemCopy);
	  // 🔥 修改点 1：必须先将对象转为 JSON 字符串！
	      // 后端 Java 实体类里 structuredContent 是 String 类型，不能传 Object
	      const contentString = JSON.stringify(this.resumeData);
	      
	      // 🔥 修改点 2：更新 rawItemCopy 的数据
	      // 使用新字符串覆盖旧字符串，同时更新可能修改的标题
	      this.rawItemCopy.structuredContent = contentString;
	  console.log('提交的J-----:', this.rawItemCopy);
	  
	  
		   // --- 真实环境：这里替换为你的后端接口 ---
      
      uni.request({
        url: 'http://localhost:8080/interview/resumes/edit',
        method: 'PUT',
        data: this.rawItemCopy,
        header: { 'Content-Type': 'application/json' },
        success: (res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
             uni.showToast({ title: 'SAVED' });
             setTimeout(() => uni.navigateBack(), 1500);
          } else {
             uni.showToast({ title: 'ERROR', icon: 'none' });
          }
        }
      });
      
     
      // --- 模拟成功 ---
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: 'UPDATE SUCCESS',
          icon: 'success'
        });
        // 模拟返回上一页
        // setTimeout(() => uni.navigateBack(), 1500);
      }, 1000);
    }
  },
  onLoad() {
      // 1. 获取事件通道
      const eventChannel = this.getOpenerEventChannel();
      
      // 2. 监听 acceptDataFromOpenerPage 事件
      // 注意：这里必须用箭头函数 (data) => {}，否则 this 指向会有问题
      eventChannel.on('sendJsonData', (data) => {
          
          // 1. 拿到列表页传过来的完整 item
        const rawItem = data.resumeData;
		this.rawItemCopy=rawItem;
        console.log('接收到的完整对象:', rawItem);

        // 2. 提取基础字段
        this.resumeId = rawItem.resumeId;

        // 3. 【关键】解析 structuredContent
        // 数据库里存的是 String，但前端编辑需要 Object
        if (rawItem.structuredContent) {
            // 把字符串 '{"name":"张三"}' 变成对象 {name: "张三"}
            this.resumeData = JSON.parse(rawItem.structuredContent);
        }
		console.log('接收到的ID:', this.resumeId);
		console.log('接收到的内容:', this.resumeData);
      });
  }
}
</script>

<style lang="scss" scoped>
/* === 孤星风格变量 === */
$lt-bg: #E0E2E5;
$lt-card: #FFFFFF;
$lt-text: #1a1a1a;
$lt-sub: #666666;
$lt-border: #CCCCCC;
$c-green: #79BBA9;
$c-yellow: #E6A73C;
$c-red: #9A332D;

.lt-container {
  min-height: 100vh;
  background-color: $lt-bg;
  font-family: Helvetica, sans-serif;
  position: relative;
  color: $lt-text;
}

/* 背景层 */
.bg-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-text {
  position: absolute; top: 80rpx; right: -20rpx;
  font-size: 100rpx; font-weight: 900; color: rgba(0,0,0,0.03);
  transform: rotate(90deg);
}
.bg-grid {
  width: 100%; height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40rpx 40rpx;
}

/* 顶部导航 */
.header-section {
  position: relative; z-index: 10;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  padding: 30rpx 40rpx;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.header-left { display: flex; flex-direction: column; }
.code { font-size: 20rpx; color: $c-green; font-family: monospace; font-weight: bold; margin-bottom: 4rpx; }
.title { font-size: 32rpx; font-weight: 900; letter-spacing: 2rpx; }
.status-badge {
  background: $lt-text; color: #fff; font-size: 20rpx; padding: 4rpx 12rpx;
  font-weight: bold; border-radius: 4rpx;
}

/* 表单区域 */
.form-viewport {
  height: calc(100vh - 120rpx); /* 减去底部高度 */
  box-sizing: border-box;
}

/* 通用卡片 */
.section-card {
  margin: 30rpx;
  background: $lt-card;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
  /* 切角设计 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20rpx), calc(100% - 20rpx) 100%, 0 100%);
  border-left: 6rpx solid $c-green;
}

.card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 30rpx; padding-bottom: 15rpx;
  border-bottom: 1px dashed $lt-border;
}
.section-title { font-size: 24rpx; font-weight: 900; color: $lt-text; letter-spacing: 1rpx; }
.add-btn {
  font-size: 20rpx; background: rgba($c-green, 0.1); color: darken($c-green, 20%);
  padding: 6rpx 16rpx; font-weight: bold; border-radius: 4rpx;
  display: flex; align-items: center;
}

/* 表单网格 */
.form-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between;
}
.input-group {
  width: 48%; margin-bottom: 24rpx;
}
.input-group.full-width { width: 100%; }

.label {
  font-size: 20rpx; color: $lt-sub; font-weight: bold; display: block; margin-bottom: 10rpx;
  font-family: monospace;
}
.lt-input {
  height: 70rpx; background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  padding: 0 20rpx; font-size: 26rpx; color: $lt-text;
  transition: all 0.3s;
}
.lt-input:focus { background: #fff; border-color: $c-green; }

.lt-textarea {
  width: 100%; background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  padding: 20rpx; font-size: 26rpx; color: $lt-text; line-height: 1.6;
  box-sizing: border-box;
  height: 360rpx;
  font-size: 20rpx;
}

/* 列表项样式 */
.list-item {
  background: #f9f9f9; padding: 20rpx; margin-bottom: 20rpx;
  border: 1px solid rgba(0,0,0,0.05);
}
.item-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20rpx;
}
.item-index { font-size: 20rpx; font-weight: bold; color: $lt-sub; font-family: monospace; }
.delete-btn { font-size: 20rpx; color: $c-red; font-weight: bold; text-decoration: underline; }

/* 底部操作栏 */
.footer-bar {
  position: fixed; bottom: 0; left: 0; width: 100%;
  height: 120rpx; background: rgba(255,255,255,0.95);
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 30rpx; box-sizing: border-box; z-index: 99;
}
.lt-btn {
  height: 80rpx; display: flex; justify-content: center; align-items: center;
  font-size: 28rpx; font-weight: 900; letter-spacing: 2rpx;
  border-radius: 0; border: none;
  clip-path: polygon(15rpx 0, 100% 0, 100% calc(100% - 15rpx), calc(100% - 15rpx) 100%, 0 100%, 0 15rpx);
}
.cancel { width: 30%; background: #eee; color: $lt-sub; }
.save { width: 65%; background: $lt-text; color: #fff; }
.btn-icon { margin-right: 10rpx; font-size: 30rpx; }
.lt-btn:active { opacity: 0.9; transform: scale(0.98); }

</style>